<script setup lang="ts">
import { QuestionFilled } from '@element-plus/icons'
import { tti } from '@/service/tti'

const e2 = ['256x256', '512x512', '1024x1024']

const e3 = ['1024x1024', '1792x1024', '1024x1792']

const model = ['dall-e-3', 'dall-e-2']

const quality = [{ label: '标准(standard)', value: 'standard' }, { label: '高清(hd)', value: 'hd' }]

const style = [{ label: '自然(natural)', value: 'natural' }, { label: '生动(vivid)', value: 'vivid' }]

const ttiStore = useTti()

const submit = () => {
  ttiStore.loading = true
  tti.generations(ttiStore.form).then(({ data }: any) => {
    ttiStore.imageSrc = data[0].url
    ttiStore.imageAlt = data[0].revised_prompt
  }).finally(() => {
    ttiStore.loading = false
  })
}

</script>
<template>
  <div class="p-2 bg-white rounded-lg border">
    <el-form
      label-position="top"
      label-width="100px"
      :model="ttiStore.form"
    >
      <div class="w-full bg-primary/10 rounded-md overflow-hidden h-fit mb-2">
        <div class="flex-1 h-fit p-2 text-sm border-l-8 border-primary">
          <p class="pt-1">
            1. 使用DALL-E-3模型生成一张图约花费0.8元。
          </p>
          <p class="pt-1">
            2. 使用DALL-E-2模型生成一张图约花费0.2元。
          </p>
          <p class="pt-1">
            3. 生成好的图片请另存为保存。
          </p>
        </div>
      </div>
      <el-form-item label="提示词(prompt)">
        <el-input
          v-model="ttiStore.form.prompt"
          :rows="4"
          type="textarea"
          placeholder="描述下您想要生成的画面,建议使用英文描述"
          maxlength="6000"
        />
      </el-form-item>
      <el-form-item label="模型(model)">
        <el-select v-model="ttiStore.form.model">
          <el-option v-for="item in model" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="尺寸(size)">
        <el-select v-model="ttiStore.form.size">
          <el-option v-for="item in (ttiStore.form.model === model[0] ? e3 : e2 )" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="ttiStore.form.model === model[0]" label="质量(quality)">
        <el-select v-model="ttiStore.form.quality">
          <el-option v-for="item in quality" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="ttiStore.form.model === model[0]" label="风格(style)">
        <el-select v-model="ttiStore.form.style">
          <el-option v-for="item in style" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="破壳AI令牌(API_KEY)">
        <el-input
          v-model="ttiStore.form.key"
          placeholder="令牌为 [sp-] 开头"
          maxlength="1000"
        />
        <el-link type="danger" href="https://perkai.pushplus.plus/token" target="_blank">
          <el-icon><QuestionFilled /></el-icon>没有令牌？点击获取
        </el-link>
      </el-form-item>
    </el-form>

    <el-button class="w-full h-14 text-xl font-bold" type="primary" :loading="ttiStore.loading" @click="submit">
      开始生成
    </el-button>
  </div>
</template>
